<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>中国地图组件</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chinaMap" style="width: 600px; height: 400px;"></div>
    <!-- <script>
        var chartDom = document.getElementById('chinaMap');
        var myChart = echarts.init(chartDom);
        var option;

        // 指定图表的配置项和数据
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>占比: {c}%'
            },
            visualMap: {
                min: 0,
                max: 25,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            series: [
                {
                    name: '调节服务项占比',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        show: true
                    },
                    data: []
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        function updateMap(data) {
            const seriesData = data.map(item => ({
                name: item.name,
                value: parseFloat(item.value)
            }));
            option.series[0].data = seriesData;
            myChart.setOption(option);
        }

        // 导出updateMap函数，供外部调用
        window.updateMap = updateMap;
    </script> -->
</body>
</html>